<template>
	<view style="background: #f5f5f9;">
		<view class="c-box" id="collect">
		    <view class="my">
		        <view class="mt">
					<person-header :currentUser="currentUser"></person-header>
		        </view>
		    </view>
		    <view class="anchorHomepage connaught-style" >
		        <view class="collect">
		            <view class="ul">
		                <view class="li" style="padding: 0;height: auto;display: flex;justify-content: space-between;align-items: center"
		                    v-for="(item,index) in ticketList" :key="index">
		                    <view style="display: flex;flex-direction: column;">
		                        <view class="desc" :style="item.ifValid==0?valid_b:invalid_b">展会门票</view>
		                        <view style="margin-left: 35rpx">
		                            <view style="display: flex;flex-direction: column;margin-top: 14rpx">
		                                <view class="nowrap beyond span" :style="item.ifValid==0?valid:invalid"  style="color: #029e9d;font-size: 16px;font-weight: 600" >{{item.exhibitionName}}</view>
		                                <view class="nowrap span" :style="item.ifValid==0?valid_black:invalid" style="margin-top: 14rpx;margin-bottom: 28rpx"
		                                      >有效期: {{item.validStartTime}} 至 {{item.validEndTime}}</view>
		                            </view>
		
		                        </view>
		                    </view>
		                    <view v-if="item.ifValid==1" style="margin-right: 35rpx">
		                        <image style="height: 105rpx;width:105rpx" src="https://m.nocexpo.com/statics/js/modules/h5/img/invalid.png"/>
		                    </view>
		                    <view v-if="item.ifValid==0" :style="item.ifValid==0?valid_b:invalid_b" style="margin-right: 28rpx" class="button" @click="showTicket(item)">
		                        <view class="span">查看</view>
		                    </view>
		                </view>
		            </view>
		        </view>
		    </view>
		</view>
		<ticketPopup  :templateId="templateId" ref="ticketPopup"></ticketPopup>
	</view>
</template>

<script>
import ticketApi from '@/api/preTickets.js';
import commonApi from '@/utils/commonMethod.js';
import personHeader from "../../components/person/personHeader.vue";

export default {
	components: {
		personHeader
	},
	data() {
		return {
			currentUser:{},
			ticketList:[],//门票列表
			templateId:'',
			valid:"color: #029e9d",
			valid_black:"color: black",
			invalid:"color: #b3b3b3",
			valid_b:"background-color: #029e9d",
			invalid_b:"background-color: #b3b3b3",
			
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
		}
	},
	async created() {
		//获取当前用户
		const currentPromise = await commonApi.currentUserAxios()
		this.currentUser = currentPromise.data.session_user_h5
		await this.getTickets()
	},
	onShow(){
			
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
			setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	mounted() {
		const pages = getCurrentPages()
		const currentPage =pages[pages.length - 1]
		this.currentUrl = currentPage.$page.fullPath
	},
	methods: {
		saveFootPrint(stayTime){
		    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"我的展会门票")
					
		},
		/**
		 * 获取门票列表
		 */
		getTickets(){
			ticketApi.getTickets(this.currentUser.id).then(res=>{
				console.log(res.data)
				this.ticketList = res.data.list
			})
		},
		async showTicket(item){
			console.log(item);
			var that = this
			that.templateId = item.tid
			setTimeout(function() {
				// console.log(this);
				that.$refs.ticketPopup.openPopup();
			  // 这里写要延时执行的代码
			}, 100); // 这里的 1000 表示延时的时间，单位是毫秒
	
		},
	},
}
</script>

<style>
	.my .mt {
	    background: url(https://m.nocexpo.com/statics/js/modules/h5/img/img15.jpg) no-repeat;
	    background-size: 100% auto;
	    overflow: hidden;
	    margin-bottom: 28rpx;
	    background-color: #fff;
	    height: auto;
	}
	.collect {
	    margin-top: 28rpx;
	}
	.collect .li {
	    overflow: hidden;
	    margin: 0 28rpx 28rpx 28rpx;
	    background: #fff;
	    border-radius: 9rpx;
	    height: 140rpx;
	    padding: 14rpx;
	}
	.desc {
	    width: 91rpx;
	    height: 42rpx;
	    line-height: 42rpx;
	    background-color: #029e9d;
	    font-size: xx-small;
	    z-index: 33;
	    left: 0;
	    top: 0;
	    text-align: center;
	    color: #ffffff;
	    border-radius: 6px 0px 6px 0px;
	}
	.nowrap {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.beyond {
	    max-width: 420rpx;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    display: block;
	}
	.button {
	    float: right;
	    height: 47rpx;
	    line-height: 47rpx;
	    padding: 0 28rpx;
	    background: #029e9d;
	    border-radius: 5rpx;
	    color: #fff;
	    font-size: 22rpx;
	}
</style>